<template>
    <div>
        <div class="title">
            <span>厨友排行</span>
        </div>
        <div class="container3">

            <div class="container4" v-for="k in Math.floor(Math.random()*20)" :key="k"><!-- v-for="(value,index) in data" :key="index" -->
                <div class="tx" @click="goUser()">
                    <img src="../assets/logo.png" alt=""><!--src="data.img"-->
                </div>
                <div class="id">
                    <span>昵称</span><!--{{data.}}-->
                </div>
                <div class="kk">
                    <div class="a1">
                        <span class="top">10,000</span><!--{{data.bfw}}-->
                        <span class="bottom">被访问</span>
                    </div>
                    <div class="a2">
                        <span class="top">5,000</span><!--{{data.sc}}-->
                        <span class="bottom">收藏</span>
                    </div>
                </div>
                <div class="gz">
                    <i class="el-icon-thumb"></i>
                    <span>关注</span>
                </div>
            </div>
        </div>
		<div class="kuang">
               <div class="ym">
                    <router-link :to="`/cyph/ph/${id==1?id:id-1}`"><dd :class="`from ${id==1?'active':''}`" >上一页</dd></router-link>
                    <router-link to="/cyph/ph/1"><dd :class="id==1?'active':''">1</dd></router-link>
                    <router-link to="/cyph/ph/2"><dd :class="id==2?'active':''">2</dd></router-link>
                    <router-link to="/cyph/ph/3"><dd :class="id==3?'active':''">3</dd></router-link>
                    <router-link to="/cyph/ph/4"><dd :class="id==4?'active':''">4</dd></router-link>
                    <router-link to="/cyph/ph/5"><dd :class="id==5?'active':''">5</dd></router-link>
                    <router-link :to="`/cyph/ph/${id==5?id:1+parseInt(id)}`"><dd :class="`next ${id==5?'active':''}`" >下一页</dd></router-link>
                </div>
        </div>
    </div>
</template>

<script>
	export default{
		props:["id"],
		data(){
			return{
				data:null
			}
		},
		methods:{
			goUser(){
				this.$router.push("/yonghu/sy1")
			}
		}
	}
</script>

<style scoped lang="scss">
	a {
	text-decoration: none;
	}
	router-link {
	text-decoration: none;
	}
    .title{
			width: 100%;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40px;
			>span{
				text-align: center;
				line-height: 30px;
				font-size: 20px;
				color: #817c74;
			}
	}
	.container3{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 60%;
		height: auto;
		margin: 0 auto;
	}
	.container4{
		border: 1px solid #c3c3c3;
		width: 199px;
		height: 200px;
		padding-top: 5px;
		margin: 5px auto;
		background-color: rgb(238, 238, 238);
		>.tx{
			width: 50px;
			height: 50px;
			margin: 5px auto;
			img{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				cursor: pointer;
			}
		}
		>.id{
			width: 35px;
			height: 21px;
			margin: 5px auto;
			margin-bottom: 30px;
			>span{
				width: 100%;
			}
		}
		>.kk{
			display: flex;
			margin: 0 auto;
			>.a1{
				border: 1px solid #c3c3c3;
				border-right: currentColor;
				border-left: currentColor;
				width: 100px;
				height: auto;
				margin: 0 auto;
				>.top{
					text-align: center;
					display: block;
				}
				>.bottom{
					text-align: center;
					display: block;
					
				}
			}
			>.a2{
				border: 1px solid #c3c3c3;
				border-right: currentColor;
				width: 100px;
				height: auto;
				margin: 0 auto;
				>.top{
					text-align: center;
					display: block;
				}
				>.bottom{
					text-align: center;
					display: block;
					
				}
			}
		}
		>.gz{
			&:hover{
				cursor: pointer;
				background-color: #fa7e3e;
			}
			&:hover span{
				color: white;
			}
			&:hover i{
				color: white;
			}
			height: 46px;
			display: flex;
			justify-content: center;
			align-items: center;
			>i{
				color: #fa7e3e;
			}
			>span{
				width: 50%;
				display: block;
				text-align: center;
				color: #fa7e3e;
			}
		}
	}
	.kuang{
		width: 500px;
		height: auto;
		margin-top: 20px;
		margin-left: 30%;
		>.ym{
			width: 570px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			dd{
				&:hover{
					background: white;
					color: #fa7e3e;
					border: 2px solid #ffa97e;
					cursor: pointer;
				}
				width: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
				border: 2px solid #ffa97e;
				background-color: #fa7e3e;
				margin-left: 30px;
				color: white;
				
			}
			.from{
				width: 50px;
			}
			.active{
				background: white;
				color: #fa7e3e;
				border: 2px solid #ffa97e;
				cursor: pointer;
				}
			.next{
				width: 50px;
			}
		}
	}
	
</style>